<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="icon" href="./images/logoWeb.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/login.css">
<style type="text/css">
html {
	height: 100%;
}

body {
	background-image:
		url("https://up.enterdesk.com/edpic/64/90/7f/64907f4d372825d8ba0588d35fb388db.jpg");
	background-size: 100% 100%;
}

input {
	width: 75%;
	border: 0;
}

input:after {
	width: 75%;
	border: 0;
}

input:before {
	width: 75%;
	border: 0;
}

.new-login .top {
	width: 428px;
	height: 117px;
	background-color: #0371d1;
	border-radius: 12px 12px 0 0;
	font-family: SourceHanSansCN-Regular;
	font-size: 30px;
	font-weight: 400;
	font-stretch: normal;
	letter-spacing: 0;
	color: #fff;
	line-height: 117px;
	text-align: center;
	overflow: hidden;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
	transform: rotate(0);
}

.new-login {
	width: 428px;
	position: relative;
	float: left;
}

.no-qrcode {
	width: 428px;
}

.main-body {
	width: 428px;
	height: 576px;
	top: 50%;
	left: 50%;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.new-login .top .bg1 {
	display: inline-block;
	width: 74px;
	height: 74px;
	background: #fff;
	opacity: .1;
	border-radius: 0 74px 0 0;
	position: absolute;
	left: 0;
	top: 43px;
}

.new-login .top .bg2 {
	display: inline-block;
	width: 94px;
	height: 94px;
	background: #fff;
	opacity: .1;
	border-radius: 50%;
	position: absolute;
	right: -16px;
	top: -16px;
}

.new-login .bottom {
	width: 428px;
	background: #fff;
	border-radius: 0 0 12px 12px;
	padding-bottom: 53px;
}

.new-login .bottom .center {
	width: 288px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 15px;
	position: relative;
}

.new-login .bottom .center .item {
	width: 288px;
	height: 35px;
	border-bottom: 1px solid #dae1e6;
	margin-bottom: 35px;
}

.new-login .bottom .center .item .icon-1 {
	background:
		url("https://oem.faisys.com/image/icon/icon-login.png?v=201808271650")
		no-repeat 1px 0;
}

.new-login .bottom .center .item .icon-2 {
	background:
		url("https://oem.faisys.com/image/icon/icon-login.png?v=201808271650")
		no-repeat -54px 0;
}

.new-login .bottom .center .item .icon-3 {
	background:
		url("https://oem.faisys.com/image/icon/icon-login.png?v=201808271650")
		no-repeat -106px 0;
}

.new-login .bottom .center .item .icon-4 {
	background:
		url("https://oem.faisys.com/image/icon/icon-login.png?v=201808271650")
		no-repeat 0 -43px;
	position: absolute;
	right: -10px;
	cursor: pointer;
}

.new-login .bottom .center .item .icon-5 {
	background:
		url("https://oem.faisys.com/image/icon/icon-login.png?v=201808271650")
		no-repeat -54px -43px;
}

.new-login .bottom .center .item .icon {
	display: inline-block;
	width: 33px;
	height: 22px;
}

.new-login .bottom .center .item {
	width: 288px;
	height: 35px;
	border-bottom: 1px solid #dae1e6;
	margin-bottom: 35px;
}
</style>
</head>
<body>
	<div class="main-body" id="updUser">
		<!-- 登录界面 -->
		<div class="new-login">
			<div class="top">
				用户信息修改 <span class="bg1"></span> <span class="bg2"></span>
			</div>
			<div class="bottom">
				<div class="center">
					<div class="item">
						<span class="icon icon-2"></span> 
						<input type="text" v-model="updLoginData.user_name" placeholder="请输入帐号" required>
					</div>
					
					<div class="item">
						<span class="icon icon-3"></span> 
						<input type="password" v-model="updLoginData.user_pass" pattern="^.{6,16}$" placeholder="请输入密码" required> 
							<span class="icon icon-4"></span>
					</div>
					
					<div class="item">
						<span class="icon icon-1"></span> 
						<input type="text" v-model="updLoginData.user_job" placeholder="请输入职位" required>
					</div>
					<div style="display: block; text-align: center;">
						<button @click="updLogin" style="margin-top: 15px; font-size: 15px; width: 100%; height: 40px; border-radius: 9px; color: #FFFFFF; background-color: #0371d1;">修改</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="./js/jquery.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./layer/layer.js"></script>
	<script src="./js/sweetalert2.all.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/vue.min.js"></script>
	<script src="./js/request.js"></script>

	<script type="text/javascript">
		new Vue({
			el:'#updUser',
			data:{
				updLoginData:{
					id:0,
					user_name:'',
					user_pass:'',
					user_job:'',
				},
				currUser:{},
			},
			methods:{
				updLogin(){
					if(this.updLoginData.user_name==""||this.updLoginData.user_pass==""||this.updLoginData.user_job==""){
						alret("账号或密码或职位为空！")
						return;
					}
					http_post('updLoginUser',this.updLoginData).then((result)=>{
						const currUserStr = JSON.stringify(result.data);  //将对象转化为json字符串
						window.sessionStorage.setItem('CurrUser',currUserStr);
					});
				},
			},
			mounted(){
				const currUserStr = window.sessionStorage.getItem("CurrUser");
				//将字符串解析为对象
				this.currUser = JSON.parse(currUserStr);
				this.updLoginData.id = this.currUser.id;
				this.updLoginData.user_name = this.currUser.user_name;
				this.updLoginData.user_pass = this.currUser.user_pass;
				this.updLoginData.user_job = this.currUser.user_job;
			}
		})
	</script>
</body>
</html>